<script setup>
// 1. 静态布局+css
// 2. 列表渲染
import { ref } from 'vue'
// tabs 导航栏，不用 ref, 因为这个值在渲染到页面后不用再修改 就意味着视图不会变 所以不用加
const tabs = [
	{ id: 1, name: '京东秒杀' },
	{ id: 2, name: '每日特价' },
	{ id: 3, name: '品类秒杀' }
]
// 3. 点谁谁亮
const curIndexOfTabs = ref(0) // 当前 tabs 的下标

</script>


<template>
	<ul>
		<li
			v-for="item, index in tabs"
			:key="item.id"
		>
			<a
				href="#"
				@click="curIndexOfTabs = index"
				:class="{active: curIndexOfTabs === index}"
			>{{ item.name }}</a>
		</li>
	</ul>
</template>


<style>
* {
	margin: 0;
	padding: 0;
}

ul {
	display: flex;
	padding: 0 10px;
	border-bottom: 2px solid #e01222;
	list-style: none;
}

ul li {
	width: 100px;
	height: 40px;
	line-height: 40px;
	text-align: center;
}

ul li a {
	display: block;
	color: #333;
	text-decoration: none;
	font-weight: bold;
}

ul li a.active {
	background-color: #e01222;
	color: #fff;
}
</style>
